<template>
  <div id="goodscatadd">
    <div class="user-title">商品管理  <em>/</em>  <span>新增分类  </span></div>
    <div class="user-box">
      <el-form class="demo-ruleForm" label-width="100px" >
        <!--:model="registerForm" status-icon :rules="registerRules" ref="registerForm"-->
        <template>
          <div class="user-form">
            <el-form-item label="分类名称:" >
              <el-input  placeholder="请输入名称" v-model="catName"></el-input>
            </el-form-item>
            <el-form-item label="上级分类:" >
              <el-select v-model="parentId"  placeholder="请选择">
                <el-option :key="list.id" :label="list.catName" :value="list.id" v-for="list in goodsCats"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </template>
        <div class="line"></div>
        <div class="input_box ">
          <el-button type="primary"  @click="saveCat()">确定</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'goodscatadd',
  data () {
    return {
      msg: '添加商品分类',
      catName: '',
      parentId: '0',
      goodsCats: []
    }
  },
  mounted: function () {
    this.getGoodsCats()
  },
  methods: {
    getGoodsCats: function () {
      var _self = this
      this.$http.post('/api/goodscats/list')
        .then(response => {
          _self.goodsCats = response.data.data
          _self.goodsCats.unshift({catName: '一级分类', parentId: '0', id: '0'})
          console.log(_self.goodsCats)
        })
        .catch(err => {
          console.log(err)
        })
    },
    saveCat () {
      console.log(this.parentId)
      this.$http.post('/api/goodscats/save', {
        catName: this.catName,
        parentId: this.parentId
      })
        .then(response => {
          this.$message({
            showClose: true,
            message: '恭喜你，添加分类成功',
            type: 'success'
          })
          // window.location.href="login.jsp?backurl="+window.location.href;
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="less">
  #goodscatadd{
    width: 100%;
    height: 100%;
    border: 1px solid #d2dae9;
    background: #fff;
    padding:0 35px;
    .user-title{
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #eeeeee;
      color: #333;
      font-size: 14px;
      em{
        font-style:normal;
        margin: 0 5px;
        color: #aaa;
      }
      span{ color: #666;}
    }
    .input_box{margin: 28px 0}
    .el-input__inner{color: #999}
    .el-form-item__label{color: #333}
    .el-select{width: 100%}
    textarea{height: 160px}
    .dialog-footer{text-align: center!important;}
    .el-upload__tip{ width: 360px;line-height: 28px;height: 28px;margin-bottom: 15px}
    .el-upload__tip a{text-decoration:underline }
    .user-box{
      height: calc(~"100vh - 180px");
      .user-form{
        width: 424px;
        margin: 30px 0;
      }
      .el-checkbox{margin-right: 20px}
      .el-checkbox+.el-checkbox{margin-left: 0}
      .line{border-bottom: 1px solid #eeeeee;}
    }
    .el-input__inner{
      border:1px solid #dcdfe6;
    }

  }
</style>
